<template>
  <div class="params">
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
 <el-card>
   
   <el-alert
    title="注意:只允许为第三级分类设置相关参数"
     type="warning"
    
  
     show-icon
    >
  </el-alert>

  <!-- add添加 -->
  <el-dialog
  :title="'添加'+titles"
  :visible.sync="addsss"
  width="30%"
 >
 <!-- input -->
 <el-form ref="addfrom" :model="addfrom" label-width="80px">
  <el-form-item :label="titles">
    <el-input v-model="addfrom.attr_name"></el-input>
  </el-form-item>
  </el-form >
  <span slot="footer" class="dialog-footer">
    <el-button @click="addsss = false">取 消</el-button>
    <el-button type="primary" @click="addsfun">确 定</el-button>
  </span>
</el-dialog>
  

   <span>选择商品分类:</span> <el-cascader
    v-model="values"
    :options="list"
    :props="prposs"
    expandTrigger="hover"
    clearable
   
    @change="handleChange"></el-cascader>

    <el-tabs v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="动态参数" name="first" :disabled="desa">
       <el-button type="primary" @click='add'>添加</el-button>
      <tree-table
      show-index
     index-text="#"
     border
    :selection-type="false"
    :expand-type='false'
    :data="treelist"
    :columns="columns"
    >  
     
    </tree-table>
    </el-tab-pane>
    <el-tab-pane label="静态参数" name="second" :disabled="desa">
        <el-button type="primary"  @click='adds'>添加</el-button>
       <tree-table
      show-index
     index-text="#"
     border
    :selection-type="false"
    :expand-type='false'
    :data="treelist"
    :columns="columns"
    >  
    <template slot='tem'>
        <el-button type="primary" >编辑</el-button>
          <el-button type="danger"  >删除</el-button>
   </template>
    
    </tree-table>
    </el-tab-pane>
   
  </el-tabs>

 </el-card>

  </div>
</template>
<script>

  
export default {
name:'Params',
  data() {
    return{
      addfrom:{
        attr_name:'',
        attr_sel:'',
        attr_vals:''
      },
      addsss:false,
      titles:'',
      activeName:'',
      values:[],
      prposs:{
      value:'cat_id',
      label:'cat_name',
      children:'children'
      },
      list:[],
      desa:true,
      tagname:'many',
      arrss:0,
      datas:[],
      treelist:[],
       columns: [
          {
            label: '1',
            prop: 'attr_name',
           
          },
          {
            label: '2',
            prop: 'attr_vals',
            minWidth: '50px',
          },
        
          {
            label: '操作',
            prop: 'likes',
            minWidth: '200px',
            type: 'template',
            template: 'tem',
          },
        ],
// clm
    }
  },
  components:{
   
  },
  created(){
  this.getlist()
  },
  methods:{
   async addsfun(){
     const {data:res}=await this.$http.post(`categories/${this.arrss}/attributes`,{attr_name:this.addfrom.attr_name,attr_sel:this.tagname})
   console.log(res);
   this.handleClick()
    this.addsss=false
    },
    // tabs
   async handleClick(tab){

     console.log(tab.label);
    if (tab.label=='动态参数') {
      this.tagname='many'
      this.titles='动态参数'
      this.treelist=[]
     const {data:res}=await this.$http.get(`categories/${this.arrss}/attributes`,{params:{sel:'many'}})
     console.log(res.data,'动态参数');
           
     
     this.treelist=res.data
    }
    else if (tab.label=='静态参数'){
      this.tagname='only'
      this.titles='静态属性'
      this.treelist=[]
         const {data:res}=await this.$http.get(`categories/${this.arrss}/attributes`,{params:{sel:'only'}})
        console.log(res.data,'静态参数');
        this.treelist=res.data
    }
    },
     add(){
        this.titles='动态参数'
       this.addsss=true
     },
     adds(){
        this.titles='静态参数'
        this.addsss=true
     },
    handleChange(){
     if (this.values.length>0&&this.values.length!==3||this.values.length===0) {
      
       this.desa=true
       this.activeName=''
          this.values=[]
           
     }else{
       let arr=Array.from(this.values).filter((i,k)=>k===2)
      let arrs= arr.join()*1
       this.arrss=arrs
     
         this.desa=false
       this.activeName='first'
      
      
      
     }
    },
     async getlist(){
      const {data:res}=await this.$http.get('categories',{params:{type:3}})
      this.list=res.data
      this.fulist=res.data
     
     console.log(res.data);
    },
  }
}
</script>


<style lang="less" scoped>
.el-card{
  margin-top: 20px;
  text-align: left;
  line-height: 20px;
}

.el-cascader{
  margin-top: 50px;
}
</style>
